<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>

<style>
  .demo a{
    float: left;
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 10px;
    background: #244db2;
    text-align: center;
    color: burlywood;
    text-decoration: none;
    margin-right: 5px;
    font: bold 20px/50px Arial;
  }
  /*存在属性    a[属性名]{}
  属性名 ： 属性名 = 是属性值（正则）
  = 绝对等于
  *=  以属性值中开头     https
  $=     以属性值中的结尾 .  pdf
    a[id=first]{    id = first
    background: #b3d4fc;
  }
  a[属性名=]{
    background: #b3d4fc;
  }
  例子：
  a[class="links item"]{  选中以class中值为links item
    background: #b3d4fc;
  }
  a[href*="http"]{   选中以href中以http开头的元素
    background: yellow;
  }
  */
 a[href$="pdf"]{
   background: #97ade3;
 }



</style>
<body>

<p class="demo">
  <a href="http://www.baidu.com" class="link" id="first" >1</a>
  <a href="" class="links item" target="_blank" title="test">2</a>
  <a href="images/123.jdg"  class="links item">3</a>
  <a href="images/123.html" class="links item">4</a>
  <a href="images/123.png" class="links item">5</a>
  <a href="/a.pdf">6</a>
  <a href="abc.pa">7</a>
</p>
</body>
</html>
